<template>
  <div class="common-layout">
    <el-container>
      <el-header class="no-flex" height="auto">
        <h4 class="block-title">基本信息</h4>
        <div class="block-line"></div>
        <el-form class="tabForm" ref="form" label-width="70px" inline>
          <el-form-item class="tabForm-item" label="真实姓名">
            <el-input v-model="userInfo.realName" disabled></el-input>
          </el-form-item>
          <el-form-item class="tabForm-item" label="用户名称">
            <el-input v-model="userInfo.username" disabled></el-input>
          </el-form-item>
        </el-form>
      </el-header>
      <el-main class="nopadding">
        <h4 class="block-title" style="margin: 20px 15px">角色信息</h4>
        <el-table ref="newsTab" height="auto" :data="tableData" style="width: 100%" stripe border>
          <el-table-column align="center" type="selection"/>
          <el-table-column prop="id" type="index" width="80" label="序号" align="center"/>
          <el-table-column prop="roleName" label="角色名称" align="center"/>
          <el-table-column prop="rolePerm" label="权限字符" align="center">
            <template #default="{ row }">
              {{ row.rolePerm }}
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" :formatter="rendererDateTime" align="center"/>
        </el-table>
        <div class="submitForm">
          <el-button type="primary" @click="subRoles">提交</el-button>
          <el-button @click="$router.push('/system/user')">返回</el-button>
        </div>
      </el-main>
    </el-container>
  </div>

</template>

<script>
export default {
  name: "user-assignRole",
  data() {
    return {
      userInfo: [],
      tableData: [], // 全部角色
      userId: this.$route.query.id
    }
  },
  created() {
    this.getDetail()
    this.checkedRole()
  },
  methods: {
    // 转换时间
    rendererDateTime(row, column, cellValue, index) {
      return this.$TOOL.dateFormat(cellValue)
    },
    // 用户详情
    async getDetail() {
      const {data} = await this.$API.system.userManagement.detail.get(this.userId)
      this.userInfo = data.user
    },
    //用户选中角色
    async checkedRole() {
      const res = await this.$API.system.userManagement.checked.get(this.userId)
      const {roles, checkedRoleIds} = res.data
      let checked = roles.map(item => item.checked = checkedRoleIds.includes(item.id))
      this.tableData = roles
      this.$nextTick(() => {
        checkedRoleIds.forEach(id => {
          const row = this.tableData.find(item => item.id == id)
          this.$refs.newsTab.toggleRowSelection(row, checked)
        })
      })
    },
    //提交
    async subRoles() {
      const checkedRow = this.$refs.newsTab.getSelectionRows()
      let data = []
      checkedRow.forEach((item) => {
        data.push({userId: this.userId, roleId: item.id})
      })
      await this.$API.system.userManagement.grant.post(data)
      this.$message.success('操作成功')
      this.$router.push("/system/user")
    }
  }
}

</script>

<style scoped>
.block-title {
  font-size: 1.25rem;
  font-weight: 400;
  color: #6379bb;
  user-select: none;
}

.block-line {
  margin: 4px 0 1rem 0;
  height: 1px;
  background: var(--el-border-color);
  border-radius: 12px;
}

.tabForm {
  padding-top: 18px;
  display: flex;
  justify-content: space-evenly;
}

.tabForm-item {
  width: 400px;
}

.submitForm {
  padding-top: 18px;
  display: flex;
  justify-content: center;
}
</style>
